import { Store } from "../../core";

import ScrollMode from "./ScrollMode";
import StoreProps from "./StoreProps";
import SwitchScrollModeButton from "./SwitchScrollModeButton";
import useScrollMode from "./useScrollMode";
import { FC, ReactElement } from "react";

export interface RenderSwitchScrollModeProps {
  isSelected: boolean;
  mode: ScrollMode;
  onClick(): void;
}

type RenderSwitchScrollMode = (
  props: RenderSwitchScrollModeProps
) => ReactElement;

export interface SwitchScrollModeProps {
  children?: RenderSwitchScrollMode;
  mode: ScrollMode;
}

const SwitchScrollMode: FC<{
  children?: RenderSwitchScrollMode;
  mode: ScrollMode;
  store: Store<StoreProps>;
}> = ({ children, mode, store }) => {
  const { scrollMode, switchTo } = useScrollMode(store);

  const onClick = () => switchTo(mode);

  const isSelected = scrollMode === mode;

  const defaultChildren = (props: RenderSwitchScrollModeProps) => (
    <SwitchScrollModeButton
      isSelected={isSelected}
      mode={props.mode}
      onClick={props.onClick}
    />
  );
  const render = children || defaultChildren;

  return render({
    isSelected,
    mode,
    onClick,
  });
};

export default SwitchScrollMode;
